<template>
  <div>
    <!-- 1.0 图片 -->
    <div class="bg-top">
      <img src="@/assets/images/banner 03.png" alt="" />
    </div>

    <!-- 2.0 列表展示 -->
    <div class="pro-list">
      <router-link
        :to="'/pro/' + item.id"
        v-for="(item, i) in datalist"
        :key="item.id"
      >
        <div :style="{ background: colorArr[i] }">
          {{ i + 1 }} - {{ item.typeName }}
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
import { getStage } from '../../api/project.js'

export default {
  data() {
    return {
      datalist: [],
      colorArr: ['#f40', '#369', 'yellowgreen']
    }
  },
  created() {
    this.getDatas()
  },
  methods: {
    async getDatas() {
      console.log(this.$id)
      const data = await getStage(this.$id)
      // console.log(data)
      this.datalist = data
    }
  },
  computed: {
    $id() {
      return this.$route.params.id
    }
  }
}
</script>

<style lang="less" scoped>
.bg-top {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0d0d25;
  overflow: hidden;
  img {
    height: 180px;
    transform: scale(1.2);
  }
}

.pro-list {
  width: 930px;
  max-width: 1120px;
  margin: 0 auto;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-top: 40px;

  a {
    width: 50%;
    margin-bottom: 30px;
    text-align: center;
    text-decoration: none;
    color: #333;
  }

  div {
    width: 70%;
    height: 50px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    color: #fff;
  }
}
</style>
